<template>
  <AdForm v-bind="fromConfig" v-model="models"></AdForm>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { AdFormPorps, SelectOptions } from '@fe-hl/admin-design-vue';
// 模拟数据
let provinces = [
  {
    value: 1,
    label: '北京市',
    cities: [
      {
        value: 101,
        label: '北京市',
      },
    ],
  },
  {
    value: 2,
    label: '上海市',
    cities: [
      {
        value: 201,
        label: '上海市',
      },
    ],
  },
  {
    value: 3,
    label: '广东省',
    cities: [
      {
        value: 301,
        label: '广州市',
      },
      {
        value: 302,
        label: '深圳市',
      },
      {
        value: 303,
        label: '珠海市',
      },
    ],
  },
  {
    value: 4,
    label: '江苏省',
    cities: [
      {
        value: 401,
        label: '南京市',
      },
      {
        value: 402,
        label: '苏州市',
      },
    ],
  },
];
// ------------------------------------------------分割线----------------------------------------------------------------

interface Models {
  provinces: string;
  cities: string;
}
const models = ref<Models>({
  provinces: '',
  cities: '',
});
const cities = ref<Array<SelectOptions>>([]);
const fromConfig: AdFormPorps<Models> = reactive({
  span: 8,
  components: [
    {
      model: 'provinces',
      components: 'el-select',
      subComponents: 'el-option',
      options: provinces,
      props: {
        filterable: true,
        label: '省',
      },
      events: {
        clear: () => {
          models.value.cities = '';
          cities.value = [];
        },
        change: (v: any) => {
          models.value.cities = '';
          const province = provinces.find((item) => item.value === v.provinces);
          if (province) {
            cities.value = province.cities;
          }
        },
      },
    },
    {
      model: 'cities',
      components: 'el-select',
      subComponents: 'el-option',
      options: cities as unknown as Array<SelectOptions>,
      props: {
        filterable: true,
        label: '市',
      },
    },
  ],
  submit: (models) => {
    console.log(models);
  },
  resetForm: () => {
    cities.value = [];
    console.log('resetForm');
  },
});
</script>
